import React, { useEffect, useRef, useState } from "react";
import "./HomeRight.css";
import * as echarts from "echarts";
import { DownOutlined } from "@ant-design/icons";
import type { MenuProps } from "antd";
import { Dropdown, Space } from "antd";
import dian from "../../../assets/icon/用电量.png";
import shui from "../../../assets/icon/用水量.png";

// HomeRight 是一个 React 组件，用于展示水电用量数据和图表
function HomeRight() {
  // Mycharts 是一个 ref，用于引用图表的 DOM 元素
  const Mycharts = useRef(null);
  const Mytocharts = useRef(null);
  // option 是图表的配置项，使用 useState 管理图表数据
  const [option, setOption] = useState({
    legend: {},
    tooltip: {},
    dataset: {
      source: [
        ["product", "2015", "2016", "2017", "2018"],
        ["Matcha Latte", 43.3, 85.8, 93.7],
        ["Milk Tea", 83.1, 73.4, 55.1],
        ["Cheese Cocoa", 86.4, 65.2, 82.5],
        ["Walnut Brownie", 72.4, 53.9, 39.1],
        ["Unhealty drink", 12.4, 13.9, 19.1],
      ],
    },
    xAxis: { type: "category" },
    yAxis: {},
    series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],
  });

  // useEffect 用于在组件挂载后初始化图表，并在 option 变化时更新图表
  useEffect(() => {
    if (Mycharts.current) {
      const myChart = echarts.init(Mycharts.current);
      myChart.setOption(option);
    }
  }, [option]);

  // handleMenuClick 处理下拉菜单点击事件，根据不同的 key 更新图表数据
  const handleMenuClick = (key: string) => {
    switch (key) {
      case "1":
        setOption({
          ...option,
          dataset: {
            source: [
              ["product", "2015", "2016", "2017", "2018"],
              ["Matcha Latte", 43.3, 85.8, 93.7],
              ["Milk Tea", 83.1, 73.4, 55.1],
              ["Cheese Cocoa", 86.4, 65.2, 82.5],
              ["Walnut Brownie", 72.4, 53.9, 39.1],
              ["Unhealty drink", 12.4, 13.9, 19.1],
            ],
          },
        });
        break;
      case "2":
        setOption({
          ...option,
          dataset: {
            source: [
              ["product", "2015", "2016", "2017", "2018"],
              ["Matcha Latte", 20.3, 15.8, 13.7],
              ["Milk Tea", 10.1, 5.4, 25.1],
              ["Cheese Cocoa", 26.4, 15.2, 32.5],
              ["Walnut Brownie", 32.4, 43.9, 59.1],
              ["Unhealty drink", 12.4, 13.9, 19.1],
            ],
          },
        });
        break;
      // 添加更多选项的数据处理逻辑
      default:
        break;
    }
  };

  // items 定义下拉菜单的选项
  const items: MenuProps["items"] = [
    {
      key: "1",
      label: (
        <a
          href="#"
          onClick={(e) => {
            e.preventDefault();
            handleMenuClick("1");
          }}
        >
          1st menu item
        </a>
      ),
    },
    {
      key: "2",
      label: (
        <a
          href="#"
          onClick={(e) => {
            e.preventDefault();
            handleMenuClick("2");
          }}
        >
          2nd menu item
        </a>
      ),
    },
    // 添加更多选项
  ]; 

  // 返回组件的 JSX 结构，包括水电用量的展示和图表
  return (
    <div style={{ color: "white" }}>
      <div>
        <div className="home-right-top1-title">
          <span className="right-top1-title-text">水电用量</span>
          <div className="title-img"></div>
        </div>
        <div className="home-right-top1-content">
          <div className="top1-content-item1">
            <img
              className="right-top1-content-item1-img"
              src={dian}
              alt="用电量"
            />
            <div className="right-top1-content-item1-text">
              <span style={{ fontSize: "24px" }}>72670</span>
              <p style={{ fontSize: "14px", color: "#9dafde" }}>总用电量(度)</p>
            </div>
          </div>
          <div className="top1-content-item2">
            <img
              className="right-top1-content-item2-img"
              src={shui}
              alt="用水量"
            />
            <div className="right-top1-content-item2-text">
              <span style={{ fontSize: "24px" }}>6809</span>
              <p style={{ fontSize: "14px", color: "#9dafde" }}>总用水量(吨)</p>
            </div>
          </div>
        </div>
        <div className="home-right-top1-title2">
          <Dropdown menu={{ items }} trigger={["click"]}>
            <a onClick={(e) => e.preventDefault()}>
              <Space>
                Click me
                <DownOutlined />
              </Space>
            </a>
          </Dropdown>
          <div
            id="chart1"
            style={{ width: "100%", height: "300px" }}
            ref={Mycharts}
          ></div>
        </div>
      </div>
      <div>
        <div>
          <div className="home-right-top1-title">
            <span className="right-top1-title-text">水电用量</span>
            <div className="title-img"></div>
          </div>
          <div className="home-right-top1-content">
            <div className="top1-content-item1">
              <img
                className="right-top1-content-item1-img"
                src={dian}
                alt="用电量"
              />
              <div className="right-top1-content-item1-text">
                <span style={{ fontSize: "24px" }}>72670</span>
                <p style={{ fontSize: "14px", color: "#9dafde" }}>
                  总用电量(度)
                </p>
              </div>
            </div>
            <div className="top1-content-item2">
              <img
                className="right-top1-content-item2-img"
                src={shui}
                alt="用水量"
              />
              <div className="right-top1-content-item2-text">
                <span style={{ fontSize: "24px" }}>6809</span>
                <p style={{ fontSize: "14px", color: "#9dafde" }}>
                  总用水量(吨)
                </p>
              </div>
            </div>
          </div>
          <div className="home-right-top1-title2">
            <div
              id="chart1"
              style={{ width: "100%", height: "300px" }}
              ref={Mytocharts}
            ></div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default HomeRight;
